<template>
  <table class="pars-table">
    <thead>
      <tr>
        <th>设备名称</th>
        <th>设备数量</th>
        <th>设备数据来源</th>
        <th v-if="!disabled" class="operation">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(row, index) in data" :key="row.id">
        <th>
          <el-input v-model="row.equipName" :disabled="disabled" placeholder="请输入设备名称" @change="handleChange" />
        </th>
        <th>
          <el-input v-model="row.equipNum" :disabled="disabled" placeholder="请输入设备数量" @change="handleChange" />
        </th>
        <th>
          <el-select v-model="row.equipSource" :disabled="disabled" placeholder="请选择">
            <el-option
              v-for="dict in dict.type.env_equipment_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </th>
        <th v-if="!disabled">
          <i class="el-icon-remove icon remove" @click="handleRemove(index)" />
          <i class="el-icon-circle-plus icon add" @click="handleAdd(index)" />
        </th>
      </tr>
    </tbody>
  </table>
</template>
<script>
import { parSettingMixin } from '@/utils/mixins'

export default {
  name: 'Equipment',
  mixins: [parSettingMixin],
  dicts: ['env_equipment_type'],
  props: {
    disabled: Boolean,
    value: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      data: this.value && this.value.length > 0 ? this.value : [{ equipName: '', equipNum: '', equipSource: '' }],
      keys: ['equipName', 'equipNum', 'equipSource']
    }
  },
  watch: {
    value(val) {
      this.data = val && val.length > 0 ? val : [this.getEmptyRow()]
    }
  },
  methods: {

  }
}
</script>
